<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、交通枢纽用户数TOP5 </div>
<div id="focus-area-traffic-top5-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 选取关注区域为景区类型的区域，统计本周累计用户数，用户数量从多到少排行前5的区域如下图所示，美兰机场累计用户数量为x万，排名第一，其次是凤凰机场，累计用户数量共x万，海口东站排名第三，累计用户数量为x万。-->
</div>

<div class="echarts-content">
    <div id="echarts-box" class="echarts-box"></div>
    <div class="echarts" id="myecharts3" style="height: 340px;"></div>
</div>

<script>
    (function () {

        $(document).ready(function () {
            // 三、交通枢纽用户数TOP5
            /*var result = [
                {label: '美兰机场美兰机场美兰机场美兰机场', count: 295},
                {label: '啊啊机场', count: 155},
                {label: '火车站美兰机场美兰机场', count: 4511},
                {label: '汽车站美兰机场', count: 425},
                {label: '广场', count: 9945},
            ]*/
            var result = ${focusAreaTrafficTop5}
            var myecharts3 = echarts.init(document.getElementById("myecharts3"));
            var source = []
            for(var i in result) {
                let j = Number(i)+1;
                source[0] = ['product', 'nums'];
                source[j] = [result[i].areaName, result[i].count];
            }
            var series = {
                tooltip: {},
                grid: {
                    left: 0,
                    right: '50px',
                    bottom: '0',
                    top: '0',
                    containLabel: false,
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    show: false,
                },
                xAxis: [
                    {
                        show: false,
                        axisLine: {
                            lineStyle: {
                                color: '#999',
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#000',
                            }
                        }
                    },
                    {
                        show: false,
                        axisLine: {
                            lineStyle: {
                                color: '#999',
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#000',
                            }
                        }
                    },
                ],
                series: [
                    //x轴
                    {
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 12
                                },
                                position: 'right',
                            },
                        },
                        encode: {
                            x: 'nums',
                        },
                        tooltip: {}
                    },
                    //y轴
                    {
                        type: 'bar',
                        xAxisIndex: 1, //代表使用第二个X轴刻度
                        barGap: '-100%',
                        barCategoryGap: '10%' ,
                        barWidth: 12,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 0,
                                color:  {
                                    // return '#45b5bd' (params)=>
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#68d28a' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#1f95f5' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                            },
                        },
                        // label: {
                        //   rotate: 40,
                        //   normal: {
                        //     show: true,
                        //     // position: 'insideRight',
                        //     position: [0, '-16'],
                        //     formatter: '{b}',
                        //     textStyle: {
                        //       fontSize: 14,
                        //       color: '#4a4b4b',
                        //     },
                        //   },
                        // },
                        encode: {
                            y: 'product',
                        },
                    },
                ],
                dataset: {
                    source: source,
                },
            };
            myecharts3.setOption(series);
            $.each(result,function(index,item){
                var span='<div class="order"><span>'+(index+1)+'</span><i title='+item.areaName+'>'+item.areaName+'</i></div>';
                $("#echarts-box").append(span)
            });
            $("#focus-area-traffic-top5-desc").text("${focusAreaTrafficTop5Desc}");
        })
    })()
</script>
<style>
    .echarts-content {
        display: flex;
        position: relative;
        margin: 20px auto 0;
        width: 910px;
    }
    .echarts-content .echarts-box {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .echarts-content .echarts-box > .order {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .echarts-content .echarts-box > .order > i {
        font-style: normal;
        flex: 0 0 126px;
        padding-left: 1em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .echarts-content .echarts-box > .order > span {
        flex: 0 0 26px;
        background-color: #a8a8a8;
        color: #fff;
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .echarts-content .echarts-box > .order:nth-child(1) > span{
        background-color: #f10000;
    }
    .echarts-content .echarts-box > .order:nth-child(2) > span {
        background-color: #ff9502;
    }
    .echarts-content .echarts-box > .order:nth-child(3) > span {
        background-color: #7f7f7f;
    }
    .echarts-content .echarts-box > .order:last-child > span {
        margin-bottom: 0;
    }
    .echarts-content .echarts-box > .order::before > span {
        bottom: 0;
        content: '';
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 5px;
        background-color: #fff;
    }
    .echarts-content .echarts {
        flex: 1;
        margin-left: 180px;
    }
</style>